﻿<!doctype html>
<html lang="zh">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<meta http-equiv="Expires" content="0"/>
	<meta http-equiv="Cache-Control" content="no-cache, no-store"/>
	<meta http-equiv="Pragma" content="no-cache"/>
	<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
	<title></title>
	<%@include file="/view/resource.jsp" %>
	<script type="text/javascript" src="${ctx}/js/common/utility.js"></script>
	<script type="text/javascript" src="${ctx}/js/history/historyRoute.js"></script>
	<script type="text/javascript" src="${ctx}/js/index/json2template.js"></script>
	<script type="text/javascript" src="${ctx}/map/js/public/util.js"></script>
	<script>
		var dvcSim = "${dvcSim}";
		var userInfo = ${userInfo};
		$(document).ready(function () {
			HistoryRoutePanel.init("hisDataGrid");
			HistoryRoutePanel.setPlateNo(dvcSim);
		});

		function renderTemplateHisGps(opt) {
			if (opt.locLatitude) {
				var strLatitude = "" + opt.locLatitude;
				strLatitude = strLatitude.substring(0, 9);
				opt.locLatitude = strLatitude;//opt.latitude.toFixed(6);
			}
			if (opt.locLongitude) {
				var strLongitude = "" + opt.locLongitude;
				strLongitude = strLongitude.substring(0, 9);
				opt.locLongitude = strLongitude;//opt.longitude.toFixed(6);
			}
			//调用模板引擎，将json数据填充到模板中，转成html
			var d = $("#infoWindowTemplateOutput").bindTemplate(
					{
						source: opt
						, template: $("#infoWindowTemplateHisGps")
					});
			var html = d.html();// d.prop("outerHTML");//appendTo("#templateContent");
			// var html =$("#templateContent").html();
			return html;
		}

		/**
		 * 打开围栏设置窗口,在地图中画围栏或者线路时调用，弹出窗口，录入参数，保存。
		 */
		var enclosureWindow;
		function openRouteWindow(url, width, height, title, closeCallback) {
			enclosureWindow = $("#commandWindow").window({
				href: url,
				width: width,
				height: height,
				modal: true,
				resizable: true,
				collapsible: false,
				minimizable: false,
				maximizable: false,
				title: title,
				cache: false,
				onClose: function () {
					if (closeCallback)
						closeCallback();
				}
			});
			$('#commandWindow').window('center');//使window居中显示
		}

		/**
		 * 创建地标
		 */
		function createMarker(ec, strPoints) {
			//console.info(11);
			var id = ec.id;
			if (id > 0 && strPoints.length > 0) {
				var iframeWindow = $("#routeMapFrame")[0];
				if (iframeWindow) {
					iframeWindow.contentWindow.createExtendMarker(ec.centerLat, ec.centerLng, ec.raidus, id, ec.name);
				}
			}
			closeEnclosureWindow();
		}

		//创建围栏
		function createExtendEnclosure(ec, strPoints) {
			//$.iMessager.show({titile: "提示", msg: "保存成功!", timeout: 2000, showType: 'fade'});
			var id = ec.id;
			if (id > 0 && strPoints.length > 0) {
				var iframeWindow = $("#routeMapFrame")[0];
				if (iframeWindow) {
					iframeWindow.contentWindow.createExtendEnclosure(strPoints, ec.radius, id, ec.enclosureType, ec.name, ec.centerLat, ec.centerLng);
				}
			}
			closeEnclosureWindow();
		}


		function loadEnclosures() {
			var iframeWindow = $("#routeMapFrame")[0];
			if (iframeWindow) {
				iframeWindow.contentWindow.loadEnclosures();
			}

			closeEnclosureWindow();
		}

		function removeMapArea(id) {
			var iframeWindow = $("#routeMapFrame")[0];
			if (iframeWindow) {
				iframeWindow.contentWindow.removeMapArea(id);
			}
		}


		//关闭区域设置窗口
		function closeEnclosureWindow() {
			if (enclosureWindow) {
				enclosureWindow.dialog('close');
			}
		}

		function hideRealDataTab() {
			$('#hisRouteLayout').layout('collapse', 'south');
			$("#cbDisplayHisData").prop('checked', false);
		}
	</script>
</head>
<body class="topjui-layout">
<div id="hisRouteLayout" class="topjui-layout" data-options="fit:true">
	<div data-options="region:'north'" style="height: 80px;">
		<form id="routeForm" method="post">
			<table cellpadding="5" style="min-width: 1080px;overflow: auto">
				<tr>
					<td style="width: 65px;">
						显示名称:
					</td>
					<td>
						<input class="topjui-textbox" type="text" name="plateNo" id="routePlateNo"
						       data-options="required:true"
						       style="width: 200px;" value=""/>
					</td>
					<td>
						时间:
					</td>
					<td>
						<input class="topjui-datetimebox" name="startTime" id="routeStartTime" editable="false" required
						       date
						       style="width: 200px" value=""/>
						至
						<input class="topjui-datetimebox" name="endTime" id="routeEndTime" editable="false" required
						       date
						       style="width: 200px" value=""/>
					</td>
					<td>最低速度:</td>
					<td>
						<input id="minSpeed" name="minSpeed" class="topjui-numberspinner" style="width:50px;"
						       value="5" data-options="min:0,max:240"/>
						<span style="color:red">(数据量大，只能查询最多两天的数据)</span>
					</td>
				</tr>
				<tr>
					<td>
						播放速度:
					</td>
					<td colspan="2">
						<div id="playSpeedSlider" style="width: 200px">
						</div>
					</td>
					<td colspan="2">
						<a id="btnQueryHisData" href="#" class="topjui-menubutton"
						   data-options="iconCls:'fa fa-search',btnCls:'topjui-btn'">
							查询</a> <a id="btnPlayRoute" href="#" class="topjui-menubutton"
						              data-options="iconCls:'fa fa-play',btnCls:'topjui-btn',disabled:true">
						播放</a> <a id="btnPauseRoute" href="#" class="topjui-menubutton"
						          data-options="iconCls:'fa fa-pause',btnCls:'topjui-btn-danger',disabled:true">
						暂停</a> <a id="btnStopPlayRoute" href="#" class="topjui-menubutton"
						          data-options="iconCls:'fa fa-stop',btnCls:'topjui-btn-danger',disabled:true">
						停止</a>&nbsp;&nbsp;&nbsp;&nbsp;
						<!--<a id="btnExportHisData" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-excel'">导出</a>-->
						<input type="checkbox" id="cbDisplayHisData"/>
						显示历史定位数据栏
					</td>
					<td>
						<div id="routeProgressbar" class="topjui-progressbar" style="width: 150px;">
						</div>
					</td>
				</tr>
			</table>
		</form>
	</div>
	<div data-options="region:'south',split:true" style="height: 220px;">
		<div id="hisDataTab" class="topjui-tabs" data-options="fit:true,border:false,plain:true,tools:'#tab-tools'">
			<div title="历史定位数据" style="padding: 0px">
				<div id="hisDataGrid">
				</div>
			</div>
			<!--
					   <div title="历史停车记录" style="padding:0px">
						  <div id="parkingGrid"></div>
					   </div>
					   -->
		</div>
		<div id="tab-tools">
			<a href="javascript:void(0)" class="topjui-menubutton"
			   data-options="plain:true,iconCls:'fa fa-angle-double-down'"
			   onclick="hideRealDataTab()"></a>
		</div>
	</div>
	<div data-options="region:'center',border:true">
		<iframe id="routeMapFrame" scrolling="no" frameborder="0" src="" style="width: 100%;
                height: 99%;"></iframe>
	</div>
</div>
<div id="commandWindow"></div>
<div id="infoWindowTemplateOutput" style="display: none;">
</div>
<div id="infoWindowTemplateHisGps" style="display: none;">
	<table width="510" class="maptable">
		<tr>
			<td width="16%" class="tdheader">[显示名称]:
			</td>
			<td align="left">{{equipName}}
			</td>
			<td width="16%" class="tdheader">[设备号]:
			</td>
			<td align="left">{{simNo}}
			</td>
		</tr>
		<tr>
			<td width="16%" class="tdheader">[通信模式]:
			</td>
			<td align="left">{{communicationModel}}
			</td>
			<td width="16%" class="tdheader">[设备类型]:
			</td>
			<td align="left">{{typeName}}
			</td>
		</tr>
		<tr>
			<td class="tdheader">
				[所属分组]:
			</td>
			<td colspan="3">
				{{depName}}
			</td>
		</tr>
		<tr>
			<td class="tdheader">[经度]:
			</td>
			<td>{{orgLongitude}}
			</td>
			<td class="tdheader">[纬度]:
			</td>
			<td>{{orgLatitude}}
			</td>
		</tr>
		<tr>
			<td class="tdheader">[速度方向]:
			</td>
			<td>{{velocity}}(km/h) {{directionDescr}}
			</td>
			<td class="tdheader">[时间]:
			</td>
			<td>{{sendTime}}
			</td>
		</tr>
		<%--	<tr>
				<td class="tdheader">
					[位置信息]:
				</td>
				<td colspan="3">
					{{location}}
				</td>
			</tr>--%>
	</table>
</div>
</body>
</html>
